import React, { useState, useEffect } from 'react';
import { getStorage, setStorage } from '../utils/storage';

function FunctionComponent() {
  const [list, setList] = useState([]);
  const [inputValue, setInputValue] = useState('');

  useEffect(() => {
    setList(getStorage() || []);
  }, []);

  const addItem = () => {
    setList(
      setStorage({
        id: new Date().getTime(),
        text: inputValue
      })
    );
  };

  const removeItem = (id) => {
    setList(setStorage(null, id));
  };

  return (
    <div className="wrapper">
      <div className="input-box">
        <input
          type="text"
          placeholder="请输入待办事项"
          onChange={(e) => setInputValue(e.target.value)}
        ></input>
        <button onClick={addItem}>增加</button>
      </div>
      <div className="list-box">
        <ul className="list">
          {list &&
            list.map((item, index) => {
              return (
                <li key={index}>
                  <span>{item.text}</span>
                  <button onClick={() => removeItem(item.id)}>删除</button>
                </li>
              );
            })}
        </ul>
      </div>
    </div>
  );
}

export default FunctionComponent;
